<template>
	<div class="card">
		<div class="header flex justify-between align-center">
			<svg-icon class="icon" icon-class="edit" />
			<div class="flex flex-column flex-start align-left text-left">
				<span>物理主机</span>
				<span>172.19.102.22</span>
			</div>
		</div>
		<div class="progresss flex flex-column justify-around align-center">
			<label-with-progress />
			<label-with-progress />
			<label-with-progress />
		</div>
	</div>
</template>
<script>
import LabelWithProgress from './LabelWithProgress.vue'
export default {
	name: 'Card',
	components: {
		LabelWithProgress,
	},
}
</script>
<style lang="scss" scoped>
.header {
	height: 2.6vw;
	width: 7.29vw;
	margin: 0 auto;
	.icon {
		width: 1.82vw;
		height: 1.3vw;
	}
}
.card {
	font-size: 0.73vw;
	width: 8.69vw;
	height: 10.68vw;
	border: 1px solid #e8e7e7;
	border-radius: 8px;
}
.progresss {
	height: 8.09vw;
}
</style>
